<template>
  <!-- :collapse-transition="false"禁止过渡效果 -->
  <el-aside :width="width">
    <el-menu
      :collapse="isCollapse"
      :collapse-transition="false"
      background-color="#545c64"
      default-active="2"
      text-color="#fff"
    >
      <h3 v-show="!isCollapse">网关后台管理系统</h3>
      <h3 v-show="isCollapse">后台</h3>
      <el-menu-item class="el-menu-item" @click="handleMenu('/dashboard')">
        <HomeFilled class="icons" />
        <span>首页</span>
      </el-menu-item>
      <el-menu-item class="el-menu-item" @click="handleMenu('/service')">
        <List class="icons" />
        <span>服务列表</span>
      </el-menu-item>
      <el-menu-item class="el-menu-item" @click="handleMenu('/user')">
        <User class="icons" />
        <span>租户列表</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { computed } from 'vue'
import { useAllDataStore } from '@/stores/header.js'
import { useRoute, useRouter } from 'vue-router'
import { HomeFilled, List, User } from '@element-plus/icons-vue'

const store = useAllDataStore()
const isCollapse = computed(() => store.state.isCollapse)
const menuList = computed(() => store.state.menuList)
const noChildren = computed(() => menuList.value.filter((item) => !item.children))
const hasChildren = computed(() => menuList.value.filter((item) => item.children))
const width = computed(() => (store.state.isCollapse ? '64px' : '180px'))

const router = useRouter()
const route = useRoute()
const handleMenu = (item) => {
  router.push(item)
  // store.selectMenu(item)
}
</script>

<style lang="less" scoped>
.el-aside {
  height: 100%;
  background-color: #545c64;
}

.icons {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.el-menu {
  border-right: none;

  h3 {
    line-height: 48px;
    color: #fff;
    text-align: center;
  }
}
</style>
